<script setup lang="ts">
import { provide, ref } from 'vue';
import HmButon from './components/HmButon.vue';
import Son from './components/Son.vue';
import HmNavbar from './components/HmNavbar.vue';

const fun=(age:number) => {
    console.log('触发了',age);
}
const fun2=(name:string) => {
    console.log('触发了',name);
}
const totalCount=ref(10)
provide('totalCount',totalCount)
provide('updateTotalCount',(num:number)=>{
    totalCount.value+=num
}) 
const appTitle = ref('应用标题')
const leftClick = (val: string) => {
  alert(val)
}
</script>
<template>
     <HmNavbar v-bind:title="appTitle" @left-click-handler="leftClick"  >
        <button>~(￣▽￣)~*新按钮</button>
     </HmNavbar>
    <h1>根组件{{ totalCount }}</h1>  
    <button @click="totalCount++">Σ(っ °Д °;)っ+1(⊙﹏⊙)</button>
    <Son :name="'张三'" :age="18" @my-event="fun" @get-name="fun"></Son>
    <Son :name="'华强'" :age="22" @my-event="fun" @get-name="fun"></Son>
    <HmButon :text="'登录'"/>
    <HmButon :text="'注册'"/>
    <HmButon />
</template>

<style scoped>

</style>
